<template>
  <div class="payment-result-container">
    <div class="result-card">
      <div class="result-icon" :class="{ success: isSuccess, error: !isSuccess }">
        <i v-if="isSuccess" class="el-icon-check"></i>
        <i v-else class="el-icon-close"></i>
      </div>
      
      <div class="result-title">
        {{ isSuccess ? '支付成功' : '支付失败' }}
      </div>
      
      <div class="result-message">
        <p v-if="isSuccess">您的订单已支付完成，我们将尽快为您发货</p>
        <p v-else>支付过程中遇到问题，请稍后重试或联系客服</p>
        <p v-if="orderNumber" class="order-number">订单号: {{ orderNumber }}</p>
      </div>
      
      <div class="result-actions">
        <el-button type="primary" @click="viewOrder">查看订单</el-button>
        <el-button @click="continueShopping">继续购物</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const route = useRoute();
const router = useRouter();

// 结果状态
const isSuccess = ref(false);
const orderNumber = ref('');

// 初始化
onMounted(() => {
  // 从路由参数或查询参数中获取状态
  const success = route.query.success === 'true' || route.query.success === '1';
  const tradeNo = route.query.tradeNo as string;
  const orderId = route.query.out_trade_no as string || route.query.orderNumber as string;
  
  isSuccess.value = success;
  orderNumber.value = orderId || '';
  
  if (success) {
    ElMessage.success('支付已完成');
  }
});

// 查看订单
const viewOrder = () => {
  router.push('/user/orders');
};

// 继续购物
const continueShopping = () => {
  router.push('/user/products');
};
</script>

<style scoped>
.payment-result-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  padding: 20px;
}

.result-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 40px;
  width: 100%;
  max-width: 500px;
  text-align: center;
}

.result-icon {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 20px;
}

.result-icon.success {
  color: #67C23A;
}

.result-icon.error {
  color: #F56C6C;
}

.result-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #303133;
}

.result-message {
  margin-bottom: 30px;
  color: #606266;
}

.order-number {
  margin-top: 10px;
  font-weight: 500;
  color: #303133;
}

.result-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}
</style> 